<template>
  <el-card class="box-card">
    <el-row :gutter="24">
      <el-col :xs="24" :sm="24" :lg="12" class="line">
        <Outside :imgUrl="require('@/assets/image/indexImg/beforeCall.png')" :title="'预报警信息'">
          <el-row :gutter="24" class="beforeCall">
            <el-col :span="11" >
               <router-link to="/warn/nowaybillrecord" class="beforeCallList">
                  <img :src="require('@/assets/image/indexImg/warning.png')" />
                  <div>
                    <p>预警</p>
                    <countTo :startVal='0' :endVal='warningCount' :duration='3000'></countTo>
                  </div>
                </router-link>
            </el-col>
            <el-col :span="11" >
              <router-link to="/warn/information?handlingStatus=0" class="beforeCallList">
              <img :src="require('@/assets/image/indexImg/call.png')" />
              <div>
                <p>报警</p>
                <countTo :startVal='0' :endVal='callCount' :duration='3000'></countTo>
              </div>
              </router-link>
            </el-col>
          </el-row>
        </Outside>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12" class="middleWidth">
        <Outside :imgUrl="require('@/assets/image/indexImg/task.png')" :title="'任务中心'">
          <el-row :gutter="24" class="beforeCall taskInfore">
            <el-col @click.native="linkToTask(1)" :span="5" class="beforeCallList" >
              <img :src="require('@/assets/image/indexImg/new.png')" />
              <div>
                <p>代办</p>
                 <countTo :startVal='0' :endVal='task.backLong' :duration='3000'></countTo>
              </div>
            </el-col>
            <el-col :span="5" class="beforeCallList"  @click.native="linkToTask(2)">
            <img :src="require('@/assets/image/indexImg/ongoing.png')" />
              <div>
                <p>进行中</p>
                <countTo :startVal='0' :endVal='task.runing' :duration='3000'></countTo>
              </div>
            </el-col>

             <el-col :span="5" class="beforeCallList"  @click.native="linkToTask(3)">
              <img :src="require('@/assets/image/indexImg/success.png')" />
              <div>
                <p>已完成</p>
                <countTo :startVal='0' :endVal='task.perfrom' :duration='3000'></countTo>
              </div>
            </el-col>
            <el-col :span="5" class="beforeCallList"  @click.native="linkToTask(4)">
              <img :src="require('@/assets/image/indexImg/overdue.png')" />
              <div>
                <p>已过期</p>
                <countTo :startVal='0' :endVal='task.past' :duration='3000'></countTo>
              </div>
            </el-col>
          </el-row>
        </Outside>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import Outside from "./outside";
import countTo from 'vue-count-to';
import { getTask, getBeforeCall, getWarnning} from "@/api/index.js";
export default {
  data() {
    return {
       warningCount:0, //预警
       callCount:0,  //报警
       task:{    //任务
         backLong:0,
         runing:0,
         perfrom:0,
         past:0
       }
    };
  },
  components: {
    Outside,
    countTo
  },
  created() {
     this.getBeforeCallData();
     this.getWarnningData()
     this.getTaskData()
  },
  methods: {
    //跳转任务看板，并存储状态
    linkToTask(type){
      console.log(type)
         this.$store.commit('setStatus',type)
        this.$router.push('/task/board')
    },
    //任务接口
    getTaskData() {
      var that=this
      getTask().then(response => {
        console.log(response)
        response.code==0?that.task=response.data:console.log(response)
      }).catch(err => {
         console.log(err)
      });
    },
    //报警
    getBeforeCallData() {
      var that=this
      getBeforeCall().then(response => {
        response.code==0?that.callCount=response.data:console.log(response)
      }).catch(err => {
         console.log(err)
      });
    },
    //预警
    getWarnningData() {
      var that=this
      getWarnning().then(response => {
        response.code==0?that.warningCount=response.data:console.log(response)
      }).catch(err => {
         console.log(err)
      });
    },
  },
};
</script>

<style lang="scss" scoped>
div {
  box-sizing: border-box;
}
a{
  display:inline-block;
}
.box-card {
  p{
    margin:0;
  }
  .line {
    border-right: 1px solid #ddd;
  }
  .beforeCall {
    margin-top: 20px;
    display: flex;
    justify-content: space-around;
    .beforeCallList {
      padding:15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border: 1px solid #ddd;
      text-align: center;
      border-radius: 10px;
      img {
        width: 60px;
        height: 60px;
      }
      div {
        margin-right: 30px;
        height: 45px;
        display:flex;
        flex-direction: column;
        justify-content: space-between;
        font-size:16px!important;
        p:nth-child(1){
          font-weight: bold;
           font-size:16px!important;
        }
        span{
          font-size:16px!important;
        }
      }
    }
  }
  .taskInfore {
    .beforeCallList {
      border-radius: 10px;
      img {
        width: 40px;
        height: 40px;
      }
      div {
        margin-right: 0;
        font-size: 15px!important;
        P:nth-child(1){
          font-size: 15px!important;
        }
        span{
           font-size: 15px!important;
        }
      }
    }
  }
  .el-col-5{
        cursor: pointer;
  }
}
@media screen and (max-width: 1200px) {
   .box-card {
    .line {
       border-right: none
    }

      .middleWidth{
       margin-top:10px;
     }


   }

}
</style>
